<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/public/layui/css/layui.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #demo {
            width: 500px;
            margin: 10px auto;
        }

        #editForm,#addForm {
            display: none;
            padding: 20px 40px 0px 0px;
        }
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <!-- 编辑的表单都放在这个div当中 -->
    <div id="editForm">
        <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">编号</label>
              <div class="layui-input-block">
                <input type="text" name="id" id="id" required readonly disabled lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入框1</label>
                <div class="layui-input-block">
                  <input type="text" name="content" id="content" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">输入框2</label>
                <div class="layui-input-block">
                  <input type="text" name="content1" id="content1" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">输入框3</label>
                <div class="layui-input-block">
                  <input type="text" name="content2" id="content2" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
              </div>
        </form>
    </div>

    <!--  -->
    <div id="addForm">
        <h1>新增</h1>
    </div>   
    
    <script src="/public/layui/layui.js"></script>
    <script>
        layui.define(function(){ 
            // var layer = layui.layer;
            // layer.msg('Hello World');
            var table = layui.table;

            var $ = layui.jquery;

            $(function(){
                // alert(111);
            })
            //第一个实例
            var tableIns = table.render({
                id: 'idTest'
                ,elem: '#demo'
                ,url: '/news/list' //数据接口
                ,page: true
                ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true, width: 80, fixed: 'left'}
                ,{field: 'content', title: '新闻内容', width: 280, }
                ,{field: 'content1', title: '新闻内容1', width: 280, }
                ,{field: 'content2', title: '新闻内容2', width: 380, }
                ,{field: 'content3', title: '新闻内容3', width: 380, }
                ,{field: 'content4', title: '新闻内容4', width: 280, }
                ,{field: 'content5', title: '新闻内容5', width: 280, }
                ,{field: 'content6', title: '新闻内容6', width: 280, }
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
            });

             //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                // 删除操作
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        // obj.del();
                        // data.id
                        $.ajax({
                            url: '/news/del',
                            type: 'post',
                            data: {'id': data.id},
                            headers:{
                                'x-csrf-token': getCookie("csrfToken"), // 前后端不分离的情况加每次打开客户端，egg会直接在客户端的 Cookie 中写入密钥 ，密钥的 Key 就是 'scrfToken' 这个字段，所以直接获取就好了
                            },
                            dataType: 'json',
                            success: function(d){
                                console.log(d);
                                if(d.affectedRows > 0){
                                    layer.msg('删除成功！', {
                                        icon: 1,
                                        time: 1200 //2秒关闭（如果不配置，默认是3秒）
                                        }, function(){
                                            // 重新加载表格数据
                                            //这里以搜索为例
                                            tableIns.reload({
                                                where: { //设定异步数据接口的额外参数，任意设
                                                }
                                                ,page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            });
                                    }); 
                                }
                            }
                        })
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                   //页面层
                   var edit_index = layer.open({
                        type: 1,
                        area: ['720px', '440px'], //宽高
                        content: $('#editForm'),
                        success: function(layero, index){
                            // layer.msg('层打开了');
                            $.ajax({
                                url: '/news/getOne',
                                type: 'post',
                                data: {'id': data.id},
                                // 变异步为同步
                                async: false,
                                headers:{
                                    'x-csrf-token': getCookie("csrfToken"), // 前后端不分离的情况加每次打开客户端，egg会直接在客户端的 Cookie 中写入密钥 ，密钥的 Key 就是 'scrfToken' 这个字段，所以直接获取就好了
                                },
                                dataType: 'json',
                                success: function(d){
                                    //console.log(d);
                                    if(d != null){
                                        // 把返回的结果赋值给页面表单
                                        // 赋值
                                        $('#editForm #id').val(d[0].id);
                                        $('#editForm #content').val(d[0].content);
                                        $('#editForm #content1').val(d[0].content1);
                                        $('#editForm #content2').val(d[0].content2);
                                    }
                                }
                            })
                        },
                        btn: ['确定', '取消'],
                        yes: function(index, layero){
                            //layer.msg('确定');
                            // 序列化
                            // let saveData = $('#editForm form').serialize();
                            // console.log(saveData);
                            $.ajax({
                                url: '/news/save',
                                type: 'post',
                                data: {
                                    'id': $('#editForm #id').val(),
                                    'content': $('#editForm #content').val(),
                                    'content1': $('#editForm #content1').val(),
                                    'content2': $('#editForm #content2').val(),
                                },
                                // 变异步为同步
                                async: false,
                                headers:{
                                    'x-csrf-token': getCookie("csrfToken"), // 前后端不分离的情况加每次打开客户端，egg会直接在客户端的 Cookie 中写入密钥 ，密钥的 Key 就是 'scrfToken' 这个字段，所以直接获取就好了
                                },
                                dataType: 'json',
                                success: function(d){
                                    //console.log(d);
                                    if(d.affectedRows > 0){
                                        // 关闭层
                                        layer.close(edit_index, function(){
                                            layer.msg('修改成功！', {
                                                icon: 1,
                                                time: 800 //2秒关闭（如果不配置，默认是3秒）
                                                }, function(){
                                                    // 重新加载表格数据
                                                    //这里以搜索为例
                                                    tableIns.reload({
                                                        where: { //设定异步数据接口的额外参数，任意设
                                                        }
                                                        ,page: {
                                                            curr: 1 //重新从第 1 页开始
                                                        }
                                                    });
                                            }); 
                                        });  
                                    }
                                }
                            })
                        }
                        ,btn2: function(index, layero){
                            layer.msg('取消');
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                }
            });
        });

        // 封装获取 cookie 的方法
        function getCookie(name){
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
            else
            return null;
        }
        
    </script>
</body>
</html>